<template>
	<div>
		<el-table :data="tableData" style="width: 100%" class="contract-table">
			<el-table-column prop="coin" label="合约" width="150">
				<template #default="scope">
					<div class="pt-10px pb-10px">
						<p class="text-[14px] font-[300] mb-4px">{{ scope.row.coin }}</p>
						<p class="text-#86909C text-12px rounded-4px w-36px text-center box-border">
							{{ scope.row.contract }}
						</p>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="sum" label="数量" width="150">
			</el-table-column>
			<el-table-column prop="price" label="开仓价格" width="150">
			</el-table-column>
			<el-table-column prop="newPrice" label="最新价格" width="150">
			</el-table-column>
			<el-table-column prop="flatPrice" label="强平价格" width="150">
				<template #default="scope">
					<div class="pt-10px pb-10px text-#F6AC57">
						{{ scope.row.flatPrice }}
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="rate" label="保证金比率" width="150">
			</el-table-column>
			<el-table-column prop="bond" label="保证金" width="150">
				<template #default="scope">
					<div class="pt-10px pb-10px flex items-center">
						<div class="mr-10px">
							<p class="mb-6px">{{ scope.row.bond }}</p>
							<p>({{ scope.row.methods }})</p>
						</div>
						<div>
							<img class="w-16px h-16px" src="/person/modify.svg" />
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="profitRate" label="盈亏（回报率）" width="150">
				<template #default="scope">
					<div :class="{ 'text-#F34E5F': !scope.row.profit, 'text-#07B175': scope.row.profit }">
						<div class="pt-10px pb-10px">
							<p class="mb-4px">
								{{ scope.row.profit ? '+' : '-' }}
								{{ scope.row.profitSum }}
							</p>
							<p>
								({{ scope.row.profit ? '+' : '-' }}
								{{ scope.row.profitRate }})
							</p>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="rate" label="保证金比率" width="360">
				<template #header>
					<div class="text-#114CEE">
						一键平仓
					</div>
				</template>
				<template #default="scope">
					<div class="flex items-center">
						<div class="text-#114CEE">
							<span>市价</span>
							<el-divider direction="vertical" />
							<span>限价</span>
						</div>
						<div class="w-120px ml-10px mr-10px">
							<el-input placeholder="价格"></el-input>
						</div>
						<el-popover placement="bottom-end" :width="400" trigger="click" popper-class="contract-popper-dark">
							<div class="flex items-center justify-around">
								<div v-for="(item, index) in numSelects" :key="index"
								 class="pr-10px pl-10px pt-4px pb-4px border-1px border-solid rounded-4px border-#3A3A3A cursor-pointer
								  bg-#3A3A3A text-#ffffff">
									{{ item  }}%
								</div>
							</div>
							<template #reference>
								<div class="w-120px">
									<el-input placeholder="数量"></el-input>
								</div>
							</template>
						</el-popover>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="rate" label="仓位止盈止损" width="150">
				<template #default="scope">
					<div class="pt-10px pb-10px flex items-center">
						<div class="mr-10px">
							<p>{{ scope.row.position[0] }}</p>
							<p>{{ scope.row.position[1] }}</p>
						</div>
						<div>
							<img class="w-16px h-16px" src="/contract/modify-white.svg" />
						</div>
					</div>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const tableData = ref<any[]>([
	{
		coin: 'BTC/USDT',
		contract: '永续',
		sum: '990.00 USDT',
		price: '1909.00',
		newPrice: '1909.00',
		flatPrice: '909.00',
		rate: '8.17%',
		bond: '4.49 USDT',
		methods: '逐仓',
		profit: true,
		profitRate: '1.80%',
		profitSum: '0.89 USDT',
		position: ['1000000.00/', '1000.00']
	},
	{
		coin: 'BTC/USDT',
		contract: '永续',
		sum: '990.00 USDT',
		price: '1909.00',
		newPrice: '1909.00',
		flatPrice: '909.00',
		rate: '8.17%',
		bond: '4.49 USDT',
		methods: '逐仓',
		profit: false,
		profitRate: '1.80%',
		profitSum: '0.89 USDT',
		position: ['1000000.00/', '1000.00']
	}
])

const numSelects = ref<any[]>([10,25,50,75,100])
</script>
<style lang="scss" scoped>
::v-deep .el-divider--vertical {
	border-left: 1px solid #114CEE;
}

::v-deep .el-input__wrapper {
	background-color: #121212;
}

.contract-table {
	--el-bg-color: #121212;
	color: #fff;
	font-size: 12px;
	--el-table-header-text-color: #fff;
	--el-table-row-hover-bg-color: #181A20;
	--el-table-border-color: #202020;
	--el-table-border: 4px solid #202020;

	// --el-table-border-color:none;
	::v-deep .el-table__empty-block {
		background-color: #121212;
		color: #fff;
	}

}
</style>
<style lang="scss">
.contract-popper-dark{
	background:#181A20 !important;
	border-color:#181A20 !important;
	.el-popper__arrow{
		display: none;
	}
}
</style>
